<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .value {
                font-weight: bold;
            }
        </style>
	</ui:define>
    
    <ui:define name="title">
        DataGrid - <span class="subitem">MultiViewState</span>
    </ui:define>

    <ui:define name="description">
        MultiViewState feature enables DataGrid to maintain its state across pages by setting multiViewState attribute to true. In this demo, manipulate use pagination, then visit another page and then come back to this page. DataGrid state should remain as you've left it.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datagrid" />

    <ui:define name="implementation">

        <h:form id="form">
            <p:messages id="messages" />

            <p:commandButton value="Clear multiViewSate" action="#{dataGridView.clearMultiViewState}" update="@form"/>

            <br/><br/>

            <p:dataGrid var="car" value="#{dataGridView.cars}" columns="3" layout="grid"
                rows="12" paginator="true" id="cars"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="6,12,16" multiViewState="true">
                
                <f:facet name="header">
                    Cars for Sale
                </f:facet>

                <p:panel header="#{car.id}" style="text-align:center">
                    <h:panelGrid columns="1" style="width:100%">
                        <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 

                        <h:outputText value="#{car.year}" />

                        <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                            <h:outputText styleClass="pi pi-search" style="margin:0 auto;"/>
                            <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                        </p:commandLink>
                    </h:panelGrid>
                </p:panel>

            </p:dataGrid>

            <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                <p:outputPanel id="carDetail" style="text-align:center;">
                    <p:panelGrid  columns="2" rendered="#{not empty dataGridView.selectedCar}" columnClasses="label,value">
                        <f:facet name="header">
                            <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/> 
                        </f:facet>
                        
                        <h:outputText value="Id:" />
                        <h:outputText value="#{dataGridView.selectedCar.id}" />

                        <h:outputText value="Year" />
                        <h:outputText value="#{dataGridView.selectedCar.year}" />

                        <h:outputText value="Color:" />
                        <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/>
                    
                        <h:outputText value="Price" />
                        <h:outputText value="$#{dataGridView.selectedCar.price}" />
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>
        </h:form>
        
    </ui:define>

</ui:composition>